<template>
  <el-dialog
    title="插入"
    :width="700"
    :append-to-body="false"
    @close="handleClose"
    custom-class="center-detail"
    v-bind="$attrs"
  >
    <div class="grid-wrap">
      <el-upload
        v-if="props.upload"
        ref="uploadRef"
        action="#"
        class="upload-res-file"
        :limit="1"
        accept=".jpg,.png"
        :show-file-list="false"
        :before-upload="beforeUpload"
      >
        <template #default>
          <div class="grid-item import"><SvgIcon icon-class="ic_upload" /></div>
        </template>
      </el-upload>

      <div
        class="grid-item"
        :class="{ active: list === selPic }"
        v-for="(list, index) in picList"
        :key="index"
        @click="choosePic(list)"
      >
        <img class="icon" :src="list" alt="" />
        <div class="more-wrap" @click="delPic(list, index)">
          <SvgIcon icon-class="ic_删除" />
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button color="#0560FD" type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { messageUtil } from '@jl/element-plus/utils';
import { commonUpload } from '@/api/common';
import { CommonUploadResp } from '@/api/common/types';
import { getEffectList, createEffect } from '@/api/scene';
import { useRequest } from '@jl/common/composable';
import { getResPath } from '@/utils/cimup';

defineOptions({
  name: 'ChoosePic',
});

interface IProps {
  upload: boolean;
  effType?: number;
}

const props = withDefaults(defineProps<IProps>(), {
  upload: false,
});

const emits = defineEmits(['closeHandle', 'selPic']);

const { run, data } = useRequest<any, API.Scene.IEffectItem[]>(getEffectList, []);

const picList = ref<any>([]);
const selPic = ref<any>(null);

const beforeUpload = async (file: any) => {
  const fileSuffix = file.name.substring(file.name.lastIndexOf('.'));
  if (!['.jpg', '.png'].includes(fileSuffix)) {
    messageUtil.warning('文件格式错误');
    return false;
  }
  const res: CommonUploadResp = await commonUpload(file);
  const fData = new FormData();
  fData.set('effType', 7);
  fData.set('effName', `图片${Math.random().toString().split('.')[1]}`);
  fData.set('effDesp', '');
  fData.set('effCover', res.files[0].refAddress);
  fData.set('quoteUrl', res.files[0].refAddress);
  fData.set('configJson', '');
  createEffect({ data: fData }).then(() => {
    picList.value.push(getResPath(res.files[0].refAddress));
  });
  return false;
};

onMounted(async () => {
  await run({ params: { effType: props.effType || 7 } });
  picList.value = data.value.map((item: API.Scene.IEffectItem) =>
    getResPath(item.quoteUrl || item.effCover)
  );
});

function handleClose() {
  emits('closeHandle', false);
}

function submit() {
  if (!selPic.value) {
    messageUtil.warning('请选择图片');
    return;
  }
  emits('selPic', selPic.value);
}

function delPic(src: string, index: number) {
  picList.value.splice(index, 1);
}

function choosePic(src: string) {
  selPic.value = src;
}
</script>

<style lang="less" scoped>
.grid-wrap {
  width: calc(100% + 5px);
  max-height: 220px;
  padding-right: 5px;
  padding-left: 10px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: 94px;
  -moz-column-gap: 20px;
  column-gap: 20px;
  row-gap: 20px;
  .grid-item {
    position: relative;
    width: 112px;
    height: 94px;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    .svg-icon {
      font-size: 42px;
      margin-right: 0px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .icon {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 1px solid #ccc;
      border-radius: 8px;
    }
    .more-wrap {
      position: absolute;
      right: -2px;
      bottom: -2px;
      width: 30px;
      height: 20px;
      background: fade(#0560fd, 80%);
      border-top-left-radius: 10px;
      .svg-icon {
        font-size: 18px;
      }
    }
    &.import {
      background: #e8e8e8;
      border-color: #e8e8e8;
    }
    &.active {
      border: 2px solid #0560fd;
    }
    &:nth-child(6n) {
      margin-right: 0px;
    }
  }

  &::-webkit-scrollbar {
    width: 3px;
  }
  &::-webkit-scrollbar-track {
    background: rgba(232, 232, 232, 0.6);
  }

  &::-webkit-scrollbar-thumb {
    background: #0560fd;
    opacity: 0.54;
  }
}
</style>
